<template>
<!-- 抖in爆款榜 -->
  <div id="SaleList">
    <!-- 数据更新时间【抖音爆款榜】 -->
    <div
      class="updateTimewl"
      v-if="rankKind == '好物热卖榜' && updateTime != ''"
    >
      数据更新时间：
      <span style="color: #888" v-if="valueday.split('?')[0] == '日榜'"
        >每天10:00持续更新前日数据</span
      >
      <span style="color: #888" v-if="valueday.split('?')[0] == '周榜'"
        >每周二10:00持续更新上一周数据</span
      >
      <span style="color: #888" v-if="valueday.split('?')[0] == '月榜'"
        >每月2号14:00持续更新上一个月数据</span
      >
    </div>
    <div v-if="rankKind == '人气爆款榜'" class="updateTimewl">
      数据更新时间：
      <span style="color: #888" v-if="valueday.split('?')[0] == '日榜'"
        >每天10:00持续更新前日数据</span
      >
      <span style="color: #888" v-if="valueday.split('?')[0] == '周榜'"
        >每周二10:00持续更新上一周数据</span
      >
      <span style="color: #888" v-if="valueday.split('?')[0] == '月榜'"
        >每月2号14:00持续更新上一个月数据</span
      >
    </div>
    <!-- 榜单 -->
    <Radiogroup00
      :radio_values="['人气爆款榜', '好物热卖榜']"
      v-model="rankKind"
      title="榜单"
      class="addPadding"
      isSearch="1"
    />
    <!-- 商品种类 -->
    <radio_group
      v-if="$store.state.industry.length"
      :radio_values="$store.state.industry[0]"
      v-model="jobKind"
      title="商品类目"
      class
      isSearch="1"
      :isUnfoldItem = "true"
    />
    <section class="type" style="margin-top: 10px">
      <time_options01_douIn
        v-model="valueday"
        :radio_values="['日榜', '周榜', '月榜']"
      />
      <!-- 搜索 -->
      <section class="search01">
        <div class="searchBox">
          <el-input
            v-model="keyword"
            placeholder=" 请输入关键词在排行榜中搜索"
            @keyup.enter.native="toSearch"
          ></el-input>
          <div class="imgBox" @click="toSearch"></div>
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage"><span></span>分享</button>
        <button @click="export_data"><span></span>导出</button>
      </div>
    </section>
    <section ref="capture">
      <ul
        class="fixedThead"
        ref="fixedThead"
        :class="{ isShow: isFixed }"
        :style="showLeft == true ? 'left:222px' : 'left:98px'"
      >
        <li tc>排名</li>
        <li>商品</li>
        <li tc>售价</li>
        <li tc>好评率</li>
        <li tc>累计售出</li>
        <li tc>服务质量分</li>
        <li tc>佣金率</li>
        <li tc>关联小店</li>
        <li tc>操作</li>
      </ul>
      <table class="table" ref="capture ">
        <thead>
          <tr>
            <th class="rankThWl">排名</th>
            <th>商品</th>
            <th>售价</th>
            <th>好评率</th>
            <th>累计售出</th>
            <th>服务质量分</th>
            <th>佣金率</th>
            <th>关联小店</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="dataList.length && !loading">
          <tr
            v-for="(item, index) in dataList"
            :key="'d' + index"
            :id="!index ? 'tr1' : ''"
          >
            <td>
              <div
                class="rankwl rankLeftWl"
                style="align-items: baseline; padding-left: 36%"
              >
                <!-- 选中来源的时候就手动从1开始排 变动显示-- -->
                <template v-if="source == '全部'">
                  <span class="rankNum">{{ index + 1 }}</span>
                  <!-- <div
                    v-if="
                      item.rank_incr == 0 ||
                        item.rank_incr > 0 ||
                        item.rank_incr < 0
                    "
                  >
                    <img src="@/assets/wang/goods/up.png" v-if="item.rank_incr > 0" />
                    <img
                      src="@/assets/wang/goods/ping.png"
                      v-if="item.rank_incr == 0"
                      class="pingImg"
                    />
                    <img src="@/assets/wang/goods/ddown.png" v-if="item.rank_incr < 0" />
                    <span
                      class="rankincr"
                      :class="{
                        down: item.rank_incr < 0,
                        ping: item.rank_incr == 0
                      }"
                    >{{ Math.abs(item.rank_incr) }}</span>
                  </div>
                  <span v-else class="new_font">{{ item.rank_incr }}</span>-->
                </template>
                <template v-if="source != '全部'">
                  <span>{{ 30 * (page - 1) + index + 1 }}</span>
                  <!-- <span style="padding-left: 10px">--</span> -->
                </template>
              </div>
            </td>
            <td>
              <div class="goodsBox" @click="toGoodsDetails(item.proId, '0')">
                <img :src="item.proLogo" class="leftImg" v-errorImg:shop />
                <div class="rightBox">
                  <span>{{ item.proTitle }}</span>
                </div>
              </div>
            </td>
            <td>￥{{ item.price }}</td>
            <td>{{ formatRate(item.favorableRate, 1) }}</td>
            <td>
              <span v-if="item.volume != 0">{{ format_num(item.volume) }}</span>
              <span v-else>--</span>
            </td>
            <td>
              <span v-if="item.serviceScore != 0">{{ item.serviceScore }}</span>
              <span v-else>--</span>
            </td>
            <!-- 好物热卖榜+人气爆款榜 显示不显示问题 v-if="rankKind == '好物热卖榜'" -->
            <td>
              <span>{{ formatRate(item.commissionRate, 1) }}</span>
            </td>
            <td class="pointer" @click="toshop(item.shopId)" v-if="item.shopName">
              <!-- 小店名称 -->
              <span>{{ item.shopName }}</span>
            </td>
            <td v-else>
              <span>--</span>
            </td>
            <td>
              <div class="optionBox">
                <button @click="toGoodsDetails(item.proId, '0')">
                  查看详情
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="upgradeBox" v-if="!permissions&& !loading">
        <RankUpgrade class="rankUpgrade" />
      </div>
      <!-- <p
        class="nothing"
        v-show="
          !loading &&
          permissions &&
          dataList.length < 30 &&
          dataList.length != 0
        "
      >
        我是有底线的～
      </p> -->
      <!-- <div
        class="pageBox"
        v-if="(dataList.length != 0 && !loading) || (!permissions && !loading)"
      > -->
      <div
        class="pageBox"
        v-if="dataList.length != 0 && !loading"
      >
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="30"
          :current-page="page"
          @current-change="PostRankList"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>

      <div
        class="empty addTop"
        v-show="isNodata"
      >
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>

      <!-- </section> -->
      <!-- 榜单未更新 -->
      <!-- <div class="empty addTop" v-if="isUpdate == false">
        <img src="@/assets/meng/empty.png" />
        <p>每日13:00更新昨日榜单，请稍后查看~</p>
      </div>-->
    </section>
    <!-- 详情弹窗 -->
    <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" />
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import Radiogroup00 from "@/component/radio_group00.vue";
import pop from "@/pages/meng/video/pop";
import SourceIcon from "@/component/SourceIcon.vue";
import RankUpgrade from "@/component/rankUpgrade.vue";
import time_options01_douIn from "@/component/time_options01_douIn.vue";
export default {
  components: {
    Radiogroup00,
    pop,
    SourceIcon,
    RankUpgrade,
    time_options01_douIn,
  },
  data() {
    return {
      rankKind: "人气爆款榜",
      my_radio01: "全部",
      valueday: "日榜",
      keyword: "",
      jobKind: "",
      dataList: [],
      showVolume: 1, //1 日销量 2 周销量
      page: 1,
      busy: false,
      loading: true,
      dialog: false,
      video_id: "",
      active_name01: 1,
      sourceList: ["全部", "淘宝", "抖音小店", "天猫", "苏宁", "考拉", "京东"],
      source: "全部",
      isLive: "",
      rank: -2,
      updateTime: "",
      cancel: null,
      needBuy: false,
      isUpdate: true,
      count: 0,
      page: 1,
      permissions: 1,
      showLeft: true,
      isFixed: false,
      offsetTop: 0,
      order_by: "desc", //   表格头部排序
      sort: 1, //   表格头部排序
      CategoryId: "0",
      isShowList: "",
      procategoryId: "",
      isNodata:false, //是否无数据
    };
  },
  computed: {},
  watch: {
    valueday: function (val) {
      this.valueday = val;
      this.dataList = [];
      this.page = 1;
      this.source = "全部";
      this.getCategory();
    },
    jobKind: function (val) {
      this.$store.state.industry[0].map((item, index) => {
        if (item == val) {
          this.procategoryId = this.$store.state.industry[1][index];
        }
      });
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == "") {
        this.dataList = [];
        this.page = 1;
        this.PostRankList();
      }
    },
    source() {
      //来源
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    rankKind() {
      this.dataList = [];
      this.page = 1;
      this.source = "全部";
      this.getCategory();
    },
    "$store.state.left_nav_flag"(old, newOld) {
      this.showLeft = newOld;
      if (newOld == false) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    },
  },
  created() {},
  mounted() {
    this.showtabs();
    window.addEventListener("scroll", this.initHeight);
    window.addEventListener("resize", () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },

  methods: {
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = "asc";
      } else {
        this.order_by = "desc";
      }
      switch (parm02) {
        case 1:
          this.sort = 1;
          break;
        case 2:
          this.sort = 2;
          break;
        case 3:
          this.sort = 3;
          break;
        case 4:
          this.sort = 4;
          break;
      }
      this.PostRankList();
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector("#tr1");

        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + "px";
          }
        }
      });
    },
    // 搜索
    toSearch() {
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    getCategory() {
      let that = this;
      let type = 1;
      that.loading = true;
      if (that.rankKind == "好物热卖榜") {
        type = 2;
      } else if (that.rankKind == "人气爆款榜") {
        type = 1;
      }
      this.$axios
        .post("/api/product/PostDouinCategory", {
          RankType: type,
          CycleType:
            this.valueday.split("?")[0] == "日榜"
              ? 1
              : this.valueday.split("?")[0] == "周榜"
              ? 2
              : 3,
          Time:
            that.valueday.split("?")[1].length == 10
              ? that.valueday.split("?")[1]
              : that.valueday.split("?")[1].slice(11),
          // Time: '2021-12-16'
        })
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            let industry = [];
            industry.push(
              res.data.data.map((item, index) => {
                return item.categoryName;
              })
            );
            industry.push(
              res.data.data.map((item, index) => {
                return item.categoryId;
              })
            );
            this.$store.commit("changeindustryArr", industry);
            this.jobKind = this.$store.state.industry[0][0];
            this.$store.state.industry[0].map((item, index) => {
              if (item == this.jobKind) {
                this.procategoryId = this.$store.state.industry[1][index];
                this.PostRankList();
              }
            });
          }
        });
    },

    // 获取榜单  分类 列表 数据
    PostRankList(cpage) {
      let that = this;
      if (cpage) {
        this.backTop();
        this.page = cpage;
      }
      that.loading = true;
      this.permissions = 1;
      // 榜单类型
      let type = 1;
      if (that.rankKind == "好物热卖榜") {
        type = 2;
      } else if (that.rankKind == "人气爆款榜") {
        type = 1;
      }
      /////////////  获取榜单数据列表  /////////////
      that.$axios
        .post(
          "/api/product/PostDouinRank",
          {
            RankType: type, // 榜单目录
            CategoryId: this.procategoryId, // 分类id
            CycleType:
              this.valueday.split("?")[0] == "日榜"
                ? 1
                : this.valueday.split("?")[0] == "周榜"
                ? 2
                : 3, // 时间类型
            Time:
              that.valueday.split("?")[1].length == 10
                ? that.valueday.split("?")[1]
                : that.valueday.split("?")[1].slice(11), // 时间
            // Time: '2021-12-16',
            Keyword: this.trimStr(that.keyword),
            Page: that.page,
            Size: 30,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          that.loading = false;
          if (res.data.code1 == 1013||res.data.code == 1003||res.data.code == 1013) {
            this.permissions = 0;
            this.dataList = [];
          } else {
            this.permissions = 1;
          }
          if (res.data.code == 0) {
            that.dataList = res.data.data;
            this.count = res.data.data.count;
            res.data.data.length < 30
              ? (that.busy = true)
              : (that.busy = false);
            that.updateTime = res.data.data.timeSpan;
            that.setTBBar();
            if(this.page == 1 && !res.data.data.length){
              this.isNodata = true;
            }else{
              this.isNodata = false;
            }
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    seeDetais(id, index) {
      this.dialog = true;
      this.active_name01 = index;
      this.video_id = id;
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`,
      });
      window.open(router.href, "_blank");
    },
    // 跳到达人详情
    toAnalysis(id) {
      this.$router.push({
        path: `/talent_main/tdetails/${id}/0`,
      });
    },
    // 跳转到好物热卖榜
    showtabs() {
      if (this.$route.query.rankKind == '人气爆款榜' || this.$route.query.rankKind == '好物热卖榜') {
        this.rankKind = this.$route.query.rankKind;
      }
    },
    // 跳转小店详情
    toshop(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shopDetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
    // 收藏商品
    addStar(id, item) {
      let that = this;
      that.$axios
        .post("/api/collection/InsertCollection", {
          CollectId: id,
          Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏商品
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post("/api/collection/CancelCollection", {
          CollectId: id,
          Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > 340 ? true : false;
    },
    // 分享
    generatorImage() {
      var that = this;
      // 时间
      let date;
      switch (that.valueday.split("?")[0]) {
        case "日榜":
          date =
            that.valueday.split("?")[1].split("-")[0] +
            "年" +
            that.valueday.split("?")[1].split("-")[1] +
            "月" +
            that.valueday.split("?")[1].split("-")[2] +
            "日";
          break;
        case "周榜":
          date =
            that.valueday.split("?")[1].split("-")[0] +
            "年" +
            that.valueday.split("?")[1].split("-")[1] +
            "月" +
            that.valueday.split("?")[1].split("-")[2] +
            "日" +
            "至" +
            that.valueday.split("?")[1].split("-")[3] +
            "年" +
            that.valueday.split("?")[1].split("-")[4] +
            "月" +
            that.valueday.split("?")[1].split("-")[5] +
            "日";

          break;
        case "月榜":
          date =
            that.valueday.split("?")[1].split("-")[0] +
            "年" +
            that.valueday.split("?")[1].split("-")[1] +
            "月";
          break;
      }
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass",
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      // console.log("shareContent", shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关
      };
      html2canvas(shareContent, opts).then((canvas) => {
        let str;
        if (that.rankKind == "好物热卖榜") {
          str = `《商品好物热卖榜-${date}》.png`;
        } else if (that.rankKind == "人气爆款榜") {
          str = `《商品人气爆款榜-${date}》.png`;
        }
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    // 导出 文字加replace 数字加\t
    export_data() {
      let that = this;
      // 时间
      let date;
      switch (that.valueday.split("?")[0]) {
        case "日榜":
          date =
            that.valueday.split("?")[1].split("-")[0] +
            "年" +
            that.valueday.split("?")[1].split("-")[1] +
            "月" +
            that.valueday.split("?")[1].split("-")[2] +
            "日";
          break;
        case "周榜":
          date =
            that.valueday.split("?")[1].split("-")[0] +
            "年" +
            that.valueday.split("?")[1].split("-")[1] +
            "月" +
            that.valueday.split("?")[1].split("-")[2] +
            "日" +
            "至" +
            that.valueday.split("?")[1].split("-")[3] +
            "年" +
            that.valueday.split("?")[1].split("-")[4] +
            "月" +
            that.valueday.split("?")[1].split("-")[5] +
            "日";
          break;
        case "月榜":
          date =
            that.valueday.split("?")[1].split("-")[0] +
            "年" +
            that.valueday.split("?")[1].split("-")[1] +
            "月";
          break;
      }
      let str = "";
      str = `排名,商品名称,售价,好评率,累计售出,服务质量分,佣金率,关联小店\n`;
      for (let i = 0; i < that.dataList.length; i++) {
        str += `${i + 1},${that.dataList[i].proTitle},\"${
          that.dataList[i].price
        }\",${that.formatRate(
          that.dataList[i].favorableRate,
          1
        )},${that.format_num(that.dataList[i].volume)},${
          that.dataList[i].serviceScore
        },${that.formatRate(that.dataList[i].commissionRate, 1)},${
          that.dataList[i].shopName
        }\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = "";
      if (that.rankKind == "好物热卖榜") {
        str_name = `《商品好物热卖榜-${date}》.csv`;
      } else if (that.rankKind == "人气爆款榜") {
        str_name = `《商品人气爆款榜-${date}》.csv`;
      }
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};
</script>
<style lang="less" scoped>
#SaleList {
  padding: 20px;
  margin-top: 31px;
  min-height: 100vh;
  padding-bottom: 1px;
  //
  .type {
    margin-top: 14px;
    margin-bottom: 14px;
    > div {
      display: inline-block;
    }
    #el_select {
      display: inline-block;
    }
    .input_group {
      display: inline-block;
      margin-left: 14px;
      position: relative;
      width: 308px;
      height: 32px;
      border-radius: 4px 4px 4px 4px;
      border: solid 1px #e5e5e5;
      box-sizing: border-box;
      input {
        width: 100%;
        font-size: 14px;
        vertical-align: -1px;

        height: 100%;
        box-sizing: border-box;
        padding-left: 11px;
        padding-right: 38px;
        border: none;
        color: #222;
      }
      input::-webkit-input-placeholder {
        color: #b5b5b5 !important;
      }
      > div {
        position: absolute;
        right: 0;
        cursor: pointer;
        top: 0px;
        text-align: center;
        width: 38px;
        height: 30px;
        border-radius: 0px 4px 4px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 15px;
        }
      }
    }
    .btn_group {
      text-align: right;
      float: right;
      button {
        width: 70px;
        height: 32px;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        font-size: 14px;
        // line-height: 30px;
        box-sizing: border-box;
        color: #555;
        text-align: center;
      }
      button:nth-of-type(2) {
        color: #67ac5b;
        border: 1px solid #67ac5b;
      }

      > button:nth-child(1) {
        margin-right: 10px;
        span {
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url("../../../../assets/zhao/fenx.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 4px;
          position: relative;
          top: 2px;
        }
      }
      > button:nth-child(2) {
        span {
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url("../../../../assets/zhao/daoc.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 4px;
          position: relative;
          top: 2px;
        }
      }
      button:nth-of-type(1):hover {
        color: #777;
        span {
          background: url("../../../../assets/zhao/fenx_h.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      button:nth-of-type(2):hover {
        color: #80be76;
        border-color: #80be76;
        span {
          background: url("../../../../assets/zhao/daoc_h.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  /* 搜索框 */
  .imgBox {
    background: url("../../../../assets/wang/talentCompare/search-nohover.png")
        no-repeat 10px 7px,
      #fff;
    background-size: 15px 15px;
  }
  .imgBox:hover {
    background: url("../../../../assets/wang/talentCompare/search.png")
        no-repeat 10px 7px,
      #fff;
    background-size: 15px 15px;
  }
  .updateTimewl {
    span {
      font-size: 14px;
    }
  }
  .drawText {
    font-size: 14px !important;
    color: #888 !important;
  }
  .updateTime {
    position: absolute;
    top: 32px;
    right: 20px;
    span {
      font-family: DINAlternate-Bold;
      font-size: 16px;
      color: #1779ff;
    }
  }
  // 无数据加距离上部距离
  .addTop {
    padding-top: 130px;
  }
  .addPadding {
    .title {
      margin-right: 46px !important;
    }
  }
  .search01 {
    display: inline-block;
    margin-left: 11px;
    .searchBox {
      margin-top: 0 !important;
    }
  }

  table {
    text-align: center;
    margin-top: 14px;
    thead {
      tr {
        th {
          padding: 0 2px;
        }
        th:nth-child(1) {
          width: 8%;
        }
        th:nth-child(2) {
          width: 20%;
          text-align: left;
          padding-left: 10px;
        }
        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7) {
          width: 10%;
        }
        th:nth-child(8) {
          width: 12%;
        }
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
    tbody {
      .rankNum {
        font-size: 15px;
      }
      tr {
        height: 78px;
        td {
          padding: 0 2px;
        }
        td:nth-child(1),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222222;
        }
        td:nth-child(8) {
          font-size: 14px;
          color: #222222;
        }
        td:nth-child(8):hover {
          color: #ff924b;
        }
        td:nth-child(2) {
          font-size: 14px;
          color: #222222;
          font-weight: 600;
        }

        td:nth-child(3) {
          font-size: 15px;
          color: #222;
        }
        td:nth-child(4) {
          font-size: 15px;
        }
      }
    }
    // 数量
    .numBox {
      span:nth-of-type(1) {
        font-size: 16px !important;
      }
    }
    // 商品
    .goodsBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      .leftImg {
        width: 50px;
        height: 50px;
        border-radius: 6px;
      }

      .rightBox {
        width: 200px;
        margin-left: 8px;
        text-align: left;
        font-size: 14px;
        color: #222222;
        font-weight: 600;
        position: relative;
        line-height: 20px;
        max-height: 40px;
        text-align: justify;
        overflow: hidden;
        padding-right: 12px;
      }
      .rightBox:before {
        position: absolute;
        right: 0;
        bottom: 0;
        content: "...";
      }
      .rightBox:after {
        position: absolute;
        right: 0;
        width: 10px;
        height: 20px;
        content: "";
        background-color: #fff;
      }
      .rightBox:hover {
        color: #ff924b;
      }
    }
    // 操作
    .optionBox {
      border-radius: 0px 4px 4px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      button {
        width: 88px;
        height: 32px;
        border: 1px solid #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        color: #fd7f2c;
        background: transparent !important;
      }
      button:hover {
        color: #ff924b;
        border: 1px solid #ff924b;
      }
    }
  }
  .filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    > button {
      width: 110px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      margin-left: 40px;
      line-height: 30px;
    }
    > p:first-child {
      font-size: 14px;
      color: #888;
      // margin-right: 20px;
      line-height: 32px;
      white-space: nowrap;
      color: #555;
    }
    #el_select {
      margin-right: 30px;
    }
  }
  .sortImg {
    width: 5px;
    height: 10px;
    vertical-align: 0;
    margin-right: 2px;
    cursor: pointer;
  }
  .paginationBox {
    width: 100%;
    background-color: #fff;
    // margin-top: 10px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    // padding-left: 1000px;
    .el-pagination {
      float: right;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
  li:nth-child(2) {
    padding-left: 10px;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: -1px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}

tr:hover {
  /deep/.rightBox:after {
    background: #fffaf7 !important;
  }
}
</style>
